<template>
  <div class="particle-container">
    <vue-particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
    <div class="form-box-wrapper">
      <div class="form-box">
        <div class="form-value">
          <form @submit.prevent="login">
            <h2>登录</h2>
            <p>欢迎回到智慧护理培训系统</p>
            <div class="inputBox">
              <i class="bi bi-person"></i>
              <input type="text" v-model="username" id="username" required />
              <label for="username">用户名/邮箱</label>
            </div>
            <div class="inputBox">
              <i class="bi bi-lock"></i>
              <input type="password" v-model="password" id="password" required />
              <label for="password">密码</label>
            </div>
            <div class="forget">
              <label><input type="checkbox" id="rememberMe" />记住我</label>
              <a href="#">忘记密码?</a>
            </div>
            <button type="submit" class="login-btn" :disabled="isLoading">
              {{ isLoading ? "登录中..." : "登录" }}
            </button>
            <div class="register-link">
              <p>
                还没有账号?
                <router-link to="/register">立即注册</router-link>
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
//import "@/assets/css/login-form.css";
import common_util from "@/util/common_util.js";
import { ElMessage } from "element-plus"; // 建议引入消息提示
import { useUserStore } from "@/stores/user.js";
import { loadSlim } from "tsparticles-slim";
const userStore = useUserStore();
const router = useRouter();
const isLoading = ref(false); // 新增：用于控制按钮的加载状态
let username = ref("");
let password = ref("");
// const login = userStore.login(username.value, password.value);
const particlesInit = async (engine) => {
  await loadSlim(engine);
};
const login = () => {
  if (!username.value || !password.value) {
    ElMessage.error("用户名和密码不能为空！");
    return;
  }

  isLoading.value = true; // 开始登录，显示加载状态

  // 定义成功和失败的回调
  const onLoginSuccess = () => {
    isLoading.value = false; // 登录流程结束，关闭加载状态
  };

  const onLoginFailure = () => {
    isLoading.value = false; // 登录流程结束，关闭加载状态
  };

  // 调用 store 的 action，传入凭据和回调函数
  userStore.login(
    username.value,
    password.value,
    onLoginSuccess,
    onLoginFailure,
  );
};
const particlesOptions = reactive({
  background: {
    color: {
      value: 'transparent'
    }
  },
  fpsLimit: 60,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push'
      },
      onHover: {
        enable: true,
        mode: 'grab'
      },
    },
    modes: {
      push: {
        quantity: 4
      },
      grab: {
        distance: 140,
        links: {
          opacity: 1
        }
      }
    }
  },
  // particles: {
  //     color: {
  //         value: '#ffffff'
  //     },
  //     links: {
  //         color: '#ffffff',
  //         distance: 150,
  //         enable: true,
  //         opacity: 0.4,
  //         width: 1
  //     },
  //     move: {
  //         direction: 'none',
  //         enable: true,
  //         outModes: {
  //             default: 'out'
  //         },
  //         random: false,
  //         speed: 2,
  //         straight: false
  //     },
  //     number: {
  //         density: {
  //             enable: true,
  //         },
  //         value: 80
  //     },
  //     opacity: {
  //         value: 0.5
  //     },
  //     shape: {
  //         type: 'circle'
  //     },
  //     size: {
  //         value: { min: 1, max: 3 }
  //     }
  // },
  particles: {
    color: {
      value: '#ffffff'
    },
    links: {
      color: '#ffffff',
      distance: 150,
      enable: true,
      opacity: 0.25, // 降低连接线透明度，让粒子形状更突出
      width: 1
    },
    move: {
      direction: 'none',
      enable: true,
      outModes: {
        default: 'out'
      },
      random: true, // 改为随机移动，更有活力
      speed: 1.5,   // 稍微加快速度
      straight: false
    },
    number: {
      density: {
        enable: true,
      },
      value: 100 // 增加粒子数量，使其更密集
    },
    opacity: {
      value: { min: 0.4, max: 0.8 } // 透明度随机，增加层次感
    },
    shape: {
      type: ['triangle', 'char'], // 关键：类型设置为数组，包含三角形和字符
      character: {
        value: ['+', '✚'], // 使用加号字符作为粒子
        font: 'Verdana',
        style: '',
        weight: '800'
      }
    },
    size: {
      value: { min: 4, max: 10 } // 增大粒子的尺寸范围
    }
  },
  detectRetina: true
});
</script>

<!-- <style scoped>
@import "@/assets/css/login-form.css";
</style> -->
<style scoped>
/* 新增：定义淡入动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.particle-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom right, #87CEEB, #B0E0E6);
  overflow: hidden;
}

#tsparticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.form-box-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* 新增：应用动画 */
  animation: fadeInUp 0.8s ease-out forwards;
}

/* ... .form-box 及后续样式保持不变 ... */
.form-box {
  position: relative;
  width: 400px;
  background: rgba(44, 62, 80, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  padding: 40px;
  transition: all 0.3s ease;
}

.form-box:hover {
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
}

.form-value h2 {
  font-size: 2em;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

.form-value p {
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

.inputBox {
  position: relative;
  margin: 30px 0;
  width: 310px;
  border-bottom: 2px solid #fff;
}

.inputBox input {
  width: 100%;
  height: 50px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1em;
  padding: 0 35px 0 5px;
  color: #fff;
}

.inputBox label {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1em;
  pointer-events: none;
  transition: 0.5s;
}

.inputBox input:focus~label,
.inputBox input:valid~label {
  top: -5px;
}

.inputBox i {
  position: absolute;
  right: 8px;
  color: #fff;
  font-size: 1.2em;
  top: 20px;
}

.forget {
  margin: -15px 0 15px;
  font-size: .9em;
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.forget label input {
  margin-right: 3px;
}

.forget a {
  color: #fff;
  text-decoration: none;
}

.forget a:hover {
  text-decoration: underline;
}

.login-btn {
  width: 100%;
  height: 40px;
  border-radius: 40px;
  background: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1em;
  font-weight: 600;
  color: #4e73df;
}

.register-link {
  font-size: .9em;
  color: #fff;
  text-align: center;
  margin: 25px 0 10px;
}

.register-link p a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
}

.register-link p a:hover {
  text-decoration: underline;
}
</style>
